<template>
	<view class="cs-user-ul">
		<view class="cs-user-ul-li" v-for="(item,index) in search_list" :key='index'>
			<view class="li-img">
				<!-- ../../../static/user.png -->
				<image :src="item.avatar ? item.avatar : defimg" mode="aspectFill"></image>
			</view>
			<view class="li-name">
				<view style='font-size:28upx;color:#333333'>{{item.nicheng}}</view>
				<view style='font-size:24upx;color:#999999'>{{item.autograph}}</view>
			</view>
			<!-- 0 未关注 否则就是已关注 -->
			<view :class="['li-watch', item.is_follow == 0 ? '' : ' active']" @click="changeWatch(index, item.user_id)">
				{{item.is_follow == 0 ? '关注' : '取消关注'}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			search_list: Array,
		},
		data() {
			return {
				now: Date.now(), // 当前时间
				defimg: this.defimg
			}
		},
		methods: {
			// 关注/取消关注
			changeWatch(index, user_id) {
				// 0 点击关注  否则 取消关注
				let url = this.search_list[index].is_follow == 0 ? '/user/video.User/UserFollowAdd' : '/user/video.User/UserFollowDel'
				this.apiPost_fn(url, {form_id: user_id}, index)
			},
			
			// 封装 关注/取消关注请求接口
			// url: 接口
			// q_obj: 请求所需参数
			// index: 当前索引
			apiPost_fn(url, q_obj, index = 0) {
				let time = Date.now()
				if (time - this.now >= 1500) { // 防止重复请求
					this.$zapi.apiPost(url, q_obj).then(res => {
						if (res.data.code == 200) {
							// 通过父组件来改变当前的内容状态
							this.$emit('changeWatch', index)
							
							// 重新重置时间
							this.now = Date.now()
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cs-user-ul{
		margin-top: 216upx;
		padding: 0 30upx 30upx 30upx;
		border-top: 20upx solid #FAFAFA;
		background: #FFFFFF;
	}
	.cs-user-ul-li{
		display: flex;
		padding: 20upx 0;
		justify-content: space-between;
		align-items: center;
		color: #333333;
		border-bottom: 1px solid #E5E5E5;
	}
	.li-img {
		position: absolute;
		font-size: 0;
		& image{width: 50upx;height: 50upx;border-radius: 50%;}
	}
	.li-name {
		margin-left: 60upx;
	}
	.li-watch {
		width: 120upx;
		padding: 6upx 0;
		font-size: 24upx;
		text-align: center;
		color: #FFFFFF;
		border-radius: 26upx;
		background: #FF9900;
	}
	// 取消关注背景色
	.active{
		background: #CCCCCC;
	}
</style>
